Han sido varias las ocasiones que me preguntaron la forma de crear ese efecto deslizante en los archivos, así que pensé que sería buena idea crear esta entrada y explicar con detalles los pasos a seguir.
Antes de comenzar debo añadir que la sugerencia de añadir este efecto fue de J.Miur quien gentilmente y como en otras ocasiones también me proporcionó toda clase de explicaciones para llevarlo a la práctica.

Guarda una copia de la plantilla para evitar problemas innecesarios.

Para este efecto deslizante es necesario Prototype y Scriptaculous, estas librerías las podemos conseguir con un script de Google API y lo añadiremos justo antes de </head>


<script src="http://www.google.com/jsapi"></script>
<script>
google.load("prototype", "1.6.1.0");
google.load("scriptaculous", "1.8.3");
</script>

Podría ser que ya tuviéramos el script añadido anteriormente para el uso de cualquier efecto de ser así omitimos este paso.

En plantilla Edición de HTML marcamos para expandir artilugios y buscamos algo así:

<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>

Justo después añadimos:
<div id='masmenosArchivos'><a href='#' onclick='Effect.toggle(&quot;ArchiveList&quot;,&quot;slide&quot;); return false'> [+/-] ARCHIVOS</a></div>

Cuando añadimos esa porción de código veremos justo después <div id='ArchiveList'> y lo vamos a sustituir por:
<div id='ArchiveList' style='display:none;'>

Guardamos los cambios y nos situamos justo antes de ]]></b:skin> allí añadimos los estilos para los archivos.

.BlogArchive #ArchiveList ul ul li {
margin : 0px !important;
padding: 5px 0px 0px 0px !important;
text-indent: -15px !important ;
}
#BlogArchive1 a {
font-weight:bold;
color: #000;
font-size: 12px;
text-decoration:none;
width: 100%;
}
#BlogArchive1 a:hover{
font-weight:bold;
color: #fff;
font-size: 12px;
text-decoration:none;
}

En "#BlogArchive1 a" modificamos el color del título, para el tamaño de la fuente lo haremos en font-size.

En "#BlogArchive1 a:hover" tenemos el color del título al pasar el cursor, al igual que el tamaño de fuente

Los enlaces de archivos se mostrarán tal y como tenemos configurado para el color de enlaces.

Siguiendo estos pasos nos aparecerá en la sidebar un texto de [+/-] ARCHIVOS que probablemente veamos repetido en la sidebar. No ocurre nada porque vamos a suprimir el primero.

Nos situamos en plantilla de diseño o en la herramienta de archivos si estamos logueados y editamos la etiqueta de archivos, eliminamos el título... guardamos los cambios y listo.

Podemos sustituir el texto por cualquier otro o por una imagen para ello buscamos el código del paso 2º y sustituimos el texto por cualquier otro o por una imagen:
<img src="url-imagen" />

Si deseamos que la imagen reúna los mismos estilos que el resto de los títulos también tiene solución.
Buscamos los estilos de los títulos de la sidebar, normalmente en sidebar h2 copiamos los estilos (en color rojo son los estilos)

.sidebar h2{
margin:0;
margin: 1.6em 0 .5em;
padding: 4px 5px;
color:#000;
font-size:12px;
font-weight:bold;
text-decoration:none;
}

Luego nos situamos justo antes de </head> y allí añadimos lo siguiente:

<style type='text/css'>
#masmenosArchivos {
aquí pegamos los estilos de sidebar h2
#masmenosArchivos a {
color: #CCC;
}
#masmenosArchivos a:hover {
background: none;
color:#eee;
}
</style>

Donde dice "aquí pegamos los estilos de sidebar h2" obviamente pegaremos lo que marqué en color rojo más arriba, como es lógico cada uno puede tener estilos diferentes.

El resultado de estos cambios lo podéis ver en mis archivos, creo que no falta nada únicamente recordar que antes de probar guardéis una copia de la plantilla.
Hiena

:O Queda muy bueno este efecto. Mañana mismo me hago un tiempo y lo pongo en práctica.

Muchas gracias a ti y a Jmiur también ;).

Saludos, Hiena.

Responder
Petterjuice

seria mucho pedir una vista previa de como se ve?

Responder
BIGARIATO

Gem@... perdona la tardanza en contestar pero hasta ahora no he visto tu comentario (motivos de trabajo). Tu blog ahora carga y se ve perfectamente en IE7. Saludos.

Responder
jesgo

Muy bien Gem@, otro modo de Mostrar/Ocultar, lo tendré en cuenta ;).

@Petterjuice (con permiso de Gem@), la vista previa la puedes ver en la sidebar de este blog de Gem@ en el widget "Mis archivos", como ella indica.

Saludos.
jesgo23

Responder
flores rojas

Probare esto del efecto deslizante, pero me da a mi que dependerá de cómo tengas hecho el efecto de ver y ocultar. Mirare si funciona en mi blog.

Responder
Jose

Hola Gem@. Muchas gracias por tu rapidez en publicar este efecto. Sólo una pregunta: si en lugar de en "archivos", quiero conseguir ese efecto en un gadget normal de html que he hecho yo con un listado, ¿son los mismos pasos? Concretamente te hablo del apartado de mi blog "recursos educativos". Gracias una vez más y un besazo.

Responder
Jaime Trujillo Escobedo

Gem@!!! pasaba a saludar y me tomo con esta maravillosa entrada :D la verdad es que el efecto deslizante es genial! gracias por explicarlo Gem@!! :)

Responder
Gem@

Me alegra que te guste Hiena :)

yz Petterjuice en mi sidebar donde dice [+/-] ARCHIVOS puedes ver el efecto.

yz Muchas gracias BIGARIATO al final solucioné el problema ;)

yz Me alegra que te guste Jesgo :)

yz Flores rojas no entiendo bien.
El efecto de mostrar ocultar y deslizante son uno solo, siguiendo los pasos se muestran los dos.

yz No Jose, para unos enlaces con html no es necesario todo eso. Miraré la forma en que los tienes y te explico :)

yz Me alegra que te guste Jaime.

Responder
ALGOGOKU

Hola Gema. Llegué a tu blog buscando mejorar un blog que aun no está 'abierto' al público. Le he puesto primero lo de los colores y numeros en los comentarios y también quería ponerle esto de los archivos. Pero tengo un problema de incompatibilidad entre estas dos cosillas. Si tengo las dos cosas (lo de los comentarios y esto de los archivos), me desaparece todo lo referente a los comentarios (ni color ni numero). Sabes a qué se puede deber? Gracias, la verdad es que no tengo apenas idea de html y voy haciendo los pasos tan bien explicados como lo haces y por separado las dos cosas me funcionan pero juntas no.

Un saludo y gracias de nuevo.

Responder
ALGOGOKU

Ah, para que no haya confusiones, el blog que te digo no es el que tengo ahora, en abierto. Es otro para abrir en un mes o eso :).

Responder
Gem@

Saludos ALGOGOKU, no sé de qué forma añadiste los colores y números o si lo hiciste usando algún script pero no debería darte problemas.
Si la plantilla es original de Blogger es muy extraño que ocurra, sin saber ni ver poco puedo ayudarte :(

Responder
ALGOGOKU

Copié los scripts tal cual pusiste en el post de colores y numeros en los comentarios (se llama así el post que hiciste), tal cual, los mismos colores y eso.

Sobre si es una plantilla original de blogger, no se si lo es pero es ESTA. Yo la tengo igual y le añadí primero los colores y numeros y acababa de poner el efecto deslizante este. Y entonces, me ha desaparecido el anterior script.

Espero que te pueda servir la hoja original de la plantilla para ver el codigo html de la misma para ver qué se puede hacer.

Muchas gracias por tu ayuda impagable.

Responder
Anónimo

Hola..Quisiera preguntarle algo.Estoy creando un blog.sobre mi estado..hospedajes.educaicon.turismo.cultura.y esas cosas.entonces..tengo la plantilla blogy ILLACRIMO.la misma tiene tres columnas.entonces si uso un codgo de enlace atravez de una imagen..hay imagenes que son mas garndes q otras..y si uso..el colocar imagenes en un widget..y colocarle un enlace a la misma..si funciona..pero.tendria q colocar otro widget d imagen para otra publicidad.cosa q daria mucho espacio..me gustaria tener un codigo.con el que pueda.redirigir una paigna atravez de una imagen..pudiendo modificar el tamaño de la imagen a la vista en el blog..muchas gracias por su atencion,..bendiciones!,,,.....

Responder
Gem@

ALGOGOKU no veo el enlace pero si es de tres columnas debe ser modificada, pega la url de la página así el enlace no se rompe ;)

yz Adoradores mira aquí siguiendo esos pasos puedes enlazar imágenes, modificar tamaño,información adicional y abrir en ventana aparte ;)

Responder
ALGOGOKU

Ostras, perdona, Gem@. Acabo de ver que puse mal el enlace. A ver ahora: ESTA

Aqui tienes la versión DEMO

y AQUI la descarga.

Es de dos columnas como puedes ver.

Saludos y gracias por la paciencia, jejeje...

Responder
Henry Herrera

Muy bonito tu efecto, cada dia aprendo mas contigo! Saludes desde Guatemala.

Responder
Gem@

Jose no me olvidé tu pregunta, puedes ver una forma de crear enlaces con ese efecto deslizante aquí
La velocidad del deslizamiento la podemos adecuar a nuestro gusto.
Hice un ejemplo para que lo veas con enlaces, naturalmente se personalizaría de acuerdo a tu sidebar ;)
El ejemplo está en la sidebar donde dice bloques animados

Responder
Gem@

Gracias Administrador, mucho tiempo sin verte por aquí ;)

yz Perfecto ALGOGOKU voy a mirar esa plantilla y te comento ;)

Responder
Jose

Hola Gem@. Ya he visto los ejemplos que me pones, pero no acabo de encontrar la forma de implementarlo siendo el título del gadget el que tiene que hacer la función de desplegar y plegar. No sé si me explico bien. En fin, cuando puedas, sin prisa, echas un ojillo a mi blog y viendo el gadget de "recursos educativos" verás lo que quiero decir.Un besico.Y gracias, por supuesto.

Responder
Gem@

Lo comprobé ALGOGOKU y los estilos que aporta el script de color en los comentarios no funciona. probé a cambiarlo de sitio sin resultado.
Aún así hay otras formas de añadir color a los comentarios.
Quizás pueda interesarte este y también puedes mirar en Vagabundia él tiene una entrada para añadir número de comentarios y color. (no he podido localizarla es cuestión de mirar con calma)

yz Te explicaste perfectamente Jose, la idea es la siguiente...
Añadir ese efecto a tu sidebar con los enlaces y luego los estilos del titulo despegable sustituirlos por los que tienes en sidebar h2. Si quieres te podría dar una ayudita en ese tema pero necesito los enlaces,
Por otra parte estuve buscando "recursos educativos" y no lo veo con ese título :O

Responder
ALGOGOKU

Vale, muchas gracias, Gem@. Probaré ese que mencionas y sino, el de Vagabundia. Ya avisaré cuando lo haya conseguido.

Hasta pronto y gracias de nuevo por las molestias.

Responder
Gem@

No es ninguna molestia ALGOGOKU, a veces los script crean conflictos y es muy extraño ni te imaginas los que tengo añadidos en mi plantilla, pero también es cierto que a veces me veo en la necesidad de añadir los ejemplos en otro blog porque hay algunos que se llevan bastante mal y para que funcionen unos dejan de hacerlo otros.

Responder
Petterjuice

gema sos un angel!
es la primera vez q me cuso con un blog asi!
segui adelante!!!

Responder
Jose

Hola Gem@. Tienes razón, en el blog no dice recursos educativos sino recursos didácticos. Siento la molestia y mi despiste. En cuanto a lo de los enlaces, no sé si te refieres a todos los que figuran dentro del gadget. Si es así, podría mandarte un correo o un archivo en un bloc de notas para que los veas. Ya me dices algo cuando buenamente puedas. Gracias mil.Y un besazo.

Responder
Anónimo

Hola,a mi me gustaría saber como se hace,supongo que con un script,lo de la Flecha para subir arriba TOP.
O sea,me refiero a la flecha que hay en el footer de cada post.
No sé...,si algun día haces un post referido a esto,me interesará.:)
Gracias.
Jaume.

Responder
Gem@

Gracias Petterjuice, se intentará :)

yz Espero ese correo Jose ;)

yz anónimo ese post ya existe :)
Ir a INICIO en las entradas con efecto deslizante ;)

Responder
Deybi

Hola Gem@.

Esto si ha quedado bien, y el efecto es tan suave, tan diferente a deslize fácil que cae como una piedra, jejeje!.

Consulta fuera de lugar: ¿Se podría hacer algo igual con las etiquetas?.

Saludines!.

Responder
Gem@

Es posible Birdelo, intentaré postear sobre las etiquetas :)

Responder
Anónimo

Se podría hacer esto mismo para la lista de blogs??? Un saludo

Responder
Gem@

No sabría decirte anónimo, con una lista de enlaces si se puede.

Responder
Yessmi

No entiendo cómo hacerlo; en mi plantilla hay tres códigos como el que mencionas , tres <b:includable id='main'>

cúal de los tres es el indicado? el que está en crosscol o dos dos que están dentro de div id='sidebar-wrapper' ? ¿cuál?

Responder
Gem@

yz Yessmi fíjate que una vez se indica que hay que buscar <b:includable id='main'> y el código que hay que añadir dice... justo después encontramos <div id='ArchiveList'>

Responder
Anónimo

Hola el efecto para el directorio y enlaces que tienes en el sidebar, es el mismo?

Podrias explicarlo.

Atte. David

Responder
Gem@

yz No David, no es el mismo. Ese efecto que tu dices está creado de esta forma incluyendo un bloque dentro de otro.

Responder
Anónimo

Hola Gem@, cómo aplico esto a las etiquetas?
Se puede?

Un beso

Responder
Gem@

yz Hola Mar si que se puede conseguir ese efecto pero no lo tengo explicado, es algo que tengo pendiente. Pero recién he visto que Rosa lo explica con todo lujo de detalles:
Mira aquí :D

Responder
Anónimo

Si, Gem@ muchas gracias. Costó esta mañana, pero lo saqué gracias a que Rosa corrigió, o mejor, amplió la entrada.
Gracias por todo a UDs.!
;-)

Responder
Gem@

yz Me alegra lo solucionaras Mar :)

Responder
Liz Hopps

Gemma quiero saber si este metodo me sirve para esconder las actualizaciones de los blogs que sirven en mi blog de amigos: http://lizchanfriends.blogspot.com

Hasta ahora he stado usando el metodo sencillo que acosejaste (http://gemablog-.blogspot.com/2008/12/mtodo-sencillo-de-expandir-recoger.html)y me ha resultado maravillosamente en mi blog normal y pensaba usarlo en este blog tambien para añadir los links y botones de mis amigos bloggeros ...hay alguna forma que use el metodo sencillo en este widget?

Besos

:D :) :D :)

LIZ

Responder
Liz Hopps

Sorry, es en "los blogs que sigo" y es este widget el que quiero esconder con el metodo sencillo, porque el otro, el de los links se que se pue hacer =)

Gracias por todo un beso
:) :) :)

LIZ

Responder
Gem@

yz Liz en la siguiente url verças un paso a paso de como añadir ese efecto en cualquier gadget
http://elescaparatederosa.blogspot.com/2009/04/expandir-y-contraer-cualquier-gadget.html
Puedes ver el efecto en unos ejemplos de Rosa :D

Responder
Liz Hopps

Gracias Gemma ers un sol con patas =)

:D :)

Besos

LIZ

Responder
Gem@

yz Gracias a ti Liz :)

Responder
Las cositas de Meri

Hola Gem@, a mi esto [+/-] ARCHIVOS me sale en la cabecera del blog abajo

Saludos

Responder
Unknown

hola gem@. estoy arreglando la página. quiero que el gadget de Directorios (lleno de banners) se abra y se despliegue y se cierre como tu gadget ARCHIVOS, ya sea clicando en la palabra DIRECTORIOS O EN UNA FLECHA O AMBOS. porque abierto queda muy feo. ¿lo explicas en alguna entrada? Yo tengo el directorio en un gadget en el footer en http://paraninosconcabeza.blogspot.com. Sé que en una entrada explicas cómo desplegar el gadget de ARCHIVOS, pero yo quisiera ponerlo en el de DIRECTORIOS.

Responder
Gem@

yz lk eso que dices es lo mismo que tratamos días atrás.

Responder
Unknown

revisaré los mails... vaya, estás enfadad conmigo... :(

Responder
Gem@

yz ¿De qué blog Meri? indícame el título por favor ;)

yz No lk, en los correos no hablamos de este sistema me refiero que es lo mismo que Rosa explica pero aplicado a los archivos.

Responder
Unknown

hola hem@, estoy buscando una de tus entradas sobre este efecto (parecido) en el que pones un ejemplo con un texto en azul, pero no la encuentro... ¿sabes a qué me refiero? Cuando clicas en el texto que has puesto de ejemplo en grandes letras en azul, se despliega suavemente el contenido...

Responder
Anónimo

Hola gracias por la informacion...mi pregunta es simple..
Una imagen en el sidebar que se desplace de arriba a abajo segun sea al hacer click me lleve a mi perfil.
Gracias y si la respuesta esta en el post disculpa por molestar....XD

Responder
Gem@

:: Hola Markus que te lleve al perfil sería un enlace normal, que se desplace de arriba a bajo no entiendo lo que quieres decir.

Responder
Anónimo

Gracias por responder...e estado averiguando...lo que quiero lograr es una imagen en el sidebar...que segun baje con el cursor me siga...Arriba/Abajo...
un ejemplo...http://poetrya.blogspot.com/

mi blog: http://teoriadelhombremuerto.blogspot.com/

Gracias de antemano....

Responder
Gem@

:: Markus ese efecto o muy similar puedes verlo en la siguiente entrada:
http://gemablog-.blogspot.com/2008/10/cartel-de-aviso-flotante.html
Al final del todo tienes un enlace para que veas el efecto funcionando :)

Responder
Unknown

GEma quiero preguntarte algo. no sabes como crear exactamente este mismo efecto pero con las librerias JQuery?
Quiero deslizar del mismo modo a mi menú archivos, pero que se utilice a JQuery en lugar de Scriptaculous.

Te lo agradecería mucho. ;)

Responder
Gem@

:: Alexnex ¿pero qué te pasó que estás perdido? :D :D
Verás quien si puede tener respuesta a tu pregunta es Pizcos, utiliza la librería jQuery en su blog y tiene ese efecto funcionando.
http://humanossinsentido.blogspot.com/

Suerte ;)

Responder
Unknown

jaja si Gem@, me perdí :$
Gracias por la data :)

Responder
Gem@

:: Que sea la última vez que desapareces :D
Suerte, verás como Pizcos tiene respuesta ;)

Responder
Anónimo

Hola Gema tanto, tanto tiempo, yo por acá con mis preguntas
Necesito que en mi blog (del libro) en las etiquetas se vean todas las entradas para cada una, lo que hice al crear la nube fue agregar el enlace de solo una entrada al titulo de la etiqueta, pero el resto no se ve imagino que es por que no hice el enlace, ahi mi pregunta, cúal es la forma correcta para que al ingresar a esa etiqueta se vean todas las entradas, en estos momentos eso no ocurre... no se si me estoy explicando bien

Gracias como siempre
besos desde chile

Responder
Gem@

:: Hola Giovanna :)
La forma de enlazar todas las entradas con una misma etiqueta es marcando sobre la etiqueta y copiando la url que aparece en el navegador.
Por ejemplo si marcas en mi nube la etiqueta Blogger en la barra del navegador verás que dice:
http://gemablog-.blogspot.com/search/label/Blogger
;)

Responder
Monica Custodio

Buenos días! ya estoy aquí!
Es posible que este efecto no se vea bien en internet explorer 8? Me lo podrías mirar, please. Lo tengo puesto en la barra lateral en la sección "me gusta leer" y desde internet explorer 8 no funciona.
Muchas gracias! .... como siempre.
La imagen de mi blog es gracias a ti así que me alegro que te guste ;)

Responder
Gem@

:: Pues con Explorer8 se ve raro, raro, rarlisimo me explico... el efecto que veo no es el que viene explicado en esta entrada sino un textarea.
Las publicaciones van ascendiendo automáticamente eso, con Firefox se ve genial pero con Explorer8 sólo ascienden los iconos :S las miniaturas quedan fijas.

Responder
Monica Custodio

pues la verdad, no se qué ha pasado! Lo tendré que quitar ...... Si me acuerdo de cómo? Ahora mismo ni idea de cómo lo hice. Qué desastre! Me pasa por no apuntarme las cosas! Gracias querida.

Responder
Gem@

:: Monica, añade un nuevo gadget con los mismos enlaces y luego eliminas ese si es que quieres quitar el efecto :)

Responder
Monica Custodio

De acuerdo Gema, eso haré, sólo una cosa más ..... desde dónde copio los enlaces? o tengo que agregarlos nuevamente uno a uno? Gracias!!!!

Responder
Gem@

:: Si fuera un listado de enlaces de texto se podría copiar y pegar desde el código fuente de la plantilla pero se trata de el gadget que muestra las miniaturas y me temo que debe ser añadido manualmente :S

Responder
Monica Custodio

ok! pues allá voy! Gracias querida.

Responder
Gem@

:: He visto que lo has quitado Mónica ¿todo bien?? :)

Responder
Monica Custodio

Gema gracias por preocuparte! Sí, lo he quitado porque me ponía nerviosísima tener ese lio ahí! No pude hacer que funcionara así que fuera y listas! Feliz semana!

Responder
Bubble

Gema ayuda!!! necesito que mis archivos se vean como en este blog: http://caracido.blogspot.com/

como un link q se abre aparte...
como hago?

BESITOS!

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top